<template>
  <iLayout>
    <section slot="title">
      <div>
        <!-- <el-select v-model="queryType" placeholder="请选择查询方式">
          <el-option v-for="item in selectOptions" :key="item.type" :label="item.name" :value="item.type">
          </el-option>
        </el-select>
        &nbsp;
        <el-button type="primary">查询</el-button> -->
        基准点
      </div>
    </section>
    <section slot="operation">
      <div>
        <el-button type="primary" @click="addPointClick">新建基准点</el-button>
      </div>
    </section>
    <section slot="right">
      <!-- 表格 -->
      <section class="dataBox flex_1">
        <el-table stripe :data="pointTable" style="width: 100%">
          <el-table-column prop="name" label="名字">
          </el-table-column>
          <el-table-column prop="h" label="h">
          </el-table-column>
          <el-table-column prop="x" label="x">
          </el-table-column>
          <el-table-column prop="y" label="y">
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span v-if=" scope.row.state==0">正常</span>
              <span v-else-if="scope.row.state==1">禁用</span>
              <span v-else>其他</span>
            </template>
          </el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">
              <span v-if=" scope.row.type==1">基准点</span>
              <span v-else-if="scope.row.type==2">工作基点</span>
              <span v-else>其他</span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="描述" width="150px">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="130">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="lookPointClick(scope.row)">详情</el-button>
              <el-button type="text" size="small" @click="setPointClick(scope.row)">修改</el-button>
              <el-button type="text" size="small" @click="delPointClick(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </section>
      <!-- 表格 -->
      <!-- 分页 -->
      <section class="pageBox">
        <el-pagination layout="prev, pager, next" @current-change="pageChange" :page-size="page.size" :current-page="page.page" :total="page.total">
        </el-pagination>
      </section>
      <!-- 分页 -->
    </section>
    <!-- 对话框们 -->
    <section>
      <!-- 添加点对话框 -->
      <el-dialog title="添加点" :visible.sync="dialog.addPoint" width="50%">
        <div class="h50vh">
          <DatumPoint ref="addPointRef" :fromData="addPointData"></DatumPoint>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.addPoint = false">取 消</el-button>
          <el-button type="primary" @click="addPointfun">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改点对话框 -->
      <el-dialog title="修改点" :visible.sync="dialog.setPoint" width="50%">
        <div class="h50vh">
          <DatumPoint ref="setPointRef" set :fromData="setPointData"></DatumPoint>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.setPoint = false">取 消</el-button>
          <el-button type="primary" @click="setPointFun">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除点对话框 -->
      <el-dialog title="删除点" :visible.sync="dialog.delPoint" width="50%">
        <div>
          确定删除点吗？
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.delPoint = false">取 消</el-button>
          <el-button type="primary" @click="delPointFun">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 查看点对话框 -->
      <el-dialog title="查看点" :visible.sync="dialog.lookPoint" width="50%">
        <div class="h50vh">
          <DatumPoint readonly ref="lookPointRef" set :fromData="lookPointData"></DatumPoint>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.lookPoint = false">取 消</el-button>
          <el-button type="primary" @click="dialog.lookPoint = false">确 定</el-button>
        </span>
      </el-dialog>
    </section>
  </iLayout>

</template>

<script>
import * as api from '../../api/private/datumPoint'
import DatumPoint from './formComponent/datumPoint_form.vue'
export default {
  components: {
    DatumPoint
  },
  data() {
    return {
      page: {
        size: 8,
        page: 0,
        total: 0
      },
      selectOptions: [
        { name: '全部', type: 0 },
        { name: '基准点', type: 1 },
        { name: '工作基准', type: 2 }
      ],
      queryType: 0,
      pointTable: [],
      dialog: {
        addPoint: false,
        setPoint: false,
        delPoint: false,
        lookPoint: false
      },
      addPointData: {
        name: '',
        createDate: '',
        creator: '',
        state: '',
        type: '',
        h: '',
        x: '',
        y: ''
      },
      setPointData: {},
      lookPointData: {}
    }
  },
  mounted() {
    this.getPointListFun()
  },
  methods: {
    async getPointListFun() {
      let req = {}
      req.limit = this.page.size
      req.page = this.page.page
      let res = await api.getDatumPointList(req)
      if (res.code == 0) {
        this.pointTable = res.data.list
        this.page.total = res.data.total
      } else {
        this.$msg.error(res.msg)
      }
    },
    pageChange(page) {
      this.page.page = page
      this.getPointListFun()
    },
    // 新建点按下
    addPointClick() {
      this.dialog.addPoint = true
    },
    // 新建点函数
    async addPointfun() {
      let bool = this.$refs.addPointRef.validate()
      if (bool) {
        let req = this.addPointData
        let res = await api.addDatumPoint(req)
        if (res.code == 0) {
          this.getPointListFun()
          this.$refs.addPointRef.resetFields()
          this.dialog.addPoint = false
        } else {
          this.$msg.error(res.msg)
        }
      }
    },
    // 设置点按下
    setPointClick(data) {
      this.setPointData = JSON.parse(JSON.stringify(data))
      this.dialog.setPoint = true
    },
    // 设置点函数
    async setPointFun() {
      let bool = this.$refs.setPointRef.validate()
      if (bool) {
        let req = this.setPointData
        let res = await api.setDatumPoint(req)
        if (res.code == 0) {
          this.getPointListFun()
          this.dialog.setPoint = false
        } else {
          this.$msg.error(res.msg)
        }
      }
      this.dialog.setPoint = false
    },
    // 删除点按下
    delPointClick(data) {
      this.catchPointData = data
      this.dialog.delPoint = true
    },
    // 删除点函数
    async delPointFun() {
      let req = [this.catchPointData.id]
      let res = await api.delDatumPoint(req)
      if (res.code == 0) {
        this.getPointListFun()
        this.dialog.delPoint = false
      } else {
        this.$msg.error(res.msg)
      }
      this.dialog.delPoint = false
    },
    // 查看点点击
    lookPointClick(data) {
      this.lookPointData = data
      this.dialog.lookPoint = true
    }
  }
}
</script>
<style lang="scss" scoped>
.pageBox {
  min-height: 60px;
}
</style>